<template>
  <view class="box">
    <view class="tou top" :style="'padding-top:' + statusBarHeight1 + 'px'">
    </view>
    <view class="tou top fixed" :style="'padding-top:' + statusBarHeight1 + 'px'">
      <image class="image1" @click="fanhui" src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png" />
      <text>
        礼品送货详情
      </text>
    </view>
    <view class="content">
      <view class="info flex" v-if="info.giftInformation">
        <image
          class="logo"
          :src="info.giftInformation.giftPicture"
          mode="scaleToFill"
        />
        <view class="info_right">
          <view class="info-name">
            {{info.giftInformation.giftName}}
          </view>
          <view class="text" v-if="info.giftInformation.receiveStartTime">
            领取时间：
          </view>
          <view class="text" v-if="info.giftInformation.receiveStartTime">
            {{info.giftInformation.receiveStartTime}}至{{info.giftInformation.receiveEndTime}}
          </view>
        </view>
      </view>
      <view class="nums" v-if="info.giftInformation">
        <view class="num_item">
          <view class="label">总库库存</view>
          <view>{{info.giftInformation.stock}}</view>
        </view>
        <view class="num_item">
          <view class="label">门店库存</view>
          <view>{{info.stock}}</view>
        </view>
      </view>
      <view class="tabs">
        <view class="tab_item" :class="tabIndex == 1? 'active':''" @click="tabChange(1)">
          礼品库存
        </view>
        <view class="tab_item" :class="tabIndex == 2? 'active':''" @click="tabChange(2)">
          配送记录
        </view>
      </view>
      <view class="list" v-if="tabIndex == 1">
        <view class="tabel_top">
          <view class="tabel_item">
            商家
          </view>
          <view class="tabel_item">
            数量
          </view>
        </view>
        <view class="item" v-for="(item, index) in list" :key="index">
          <view class="tabel_item">
            {{item.merchantName}}
          </view>
          <view class="tabel_item">
            {{item.stock}}
          </view>
        </view>
      </view>
      <view class="list" v-show="tabIndex == 2">
        <!-- <uDatetimePicker class="picker" v-model="dates" type="date" @change="changeTime" /> -->
        <uni-datetime-picker class="picker" v-model="dates" type="daterange" @change="changeTime" />
        <view class="tabel_top">
          <view class="tabel_item">
            时间
          </view>
          <view class="tabel_item">
            商家
          </view>
          <view class="tabel_item">
            数量
          </view>
        </view>
        <view class="item" v-for="(item, index) in list" :key="index">
          <view class="tabel_item" v-if="item.createDate">
            {{item.createDate.split(' ')[0]}}
          </view>
          <view class="tabel_item">
            {{item.merchantName}}
          </view>
          <view class="tabel_item">
            {{item.type == 1 ? '送出' : "收回"}}{{item.giftNumber}}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  computed: {
    ...mapGetters(["statusBarHeight1", "userinfo"]),
  },
  data() {
    return {
      info: {},
      list: [],
      id: '',
      userInfo: uni.getStorageSync("Pduser"),
      tabIndex: 1,
      dates: [],
      queryEnd: "",
      queryStar: ""
    }
  },
  onLoad(option) {
    this.id = option.id
    this.giftName = option.name
  },
  onShow() {
    this.getInfo()
    this.getList()
  },
  methods: {
    tabChange(index) {
      this.tabIndex = index
      this.init()
    },
    getInfo() {
      this.$myRequest.get("/api/mobile/vehicleOwner/getAdminGiftLists", {
        giftName: this.giftName,
        userId: this.userInfo.id
      }).then(res => {
        this.info = res.GiftLists.pageList[0]
      })
    },
    init() {
      this.getList()
    },
    changeTime(e) {
      if (e.length != 0) {
        this.queryStar = e[0]
        this.queryEnd = e[1]
      } else {
        this.queryStar = ''
        this.queryEnd = ''
      }
      this.dates = e
      this.getList()
    },
    fanhui() {
      uni.navigateBack({
        delta: 1
      });
    },
    getList() {
      uni.showLoading({
        title: '加载中'
      });
      if(this.tabIndex == 2) {
        this.$myRequest.get("/api/mobile/vehicleOwner/getGiftInventoryByGiftId", {
          giftId: this.id,
          userId: this.userInfo.id,
          queryStar: this.queryStar,
          queryEnd: this.queryEnd,
        }).then(res => {
          this.list = res.giftsForRecords.pageList
          uni.hideLoading();
        })
      } else {
        this.$myRequest.get("/api/mobile/vehicleOwner/getAdminMerchantStock", {
          giftId: this.id,
          userId: this.userInfo.id,
          dates: ''
        }).then(res => {
          console.log(res);
          this.list = res.GiftLists.pageList
          uni.hideLoading();
        })
      }
    }
  },
}
</script>
<style lang="less" scoped>

	.box {
		width: 100%;
		min-height: 100vh;
		// padding-bottom: 130rpx;
		background-color: #fff;
	}

	.tou {
		position: relative;
		width: 100%;
		// height: 88rpx;
		text-align: center;
		line-height: 88rpx;
		font-size: 36rpx;
		color: #fff;
		background-color: #64b6a8;

		.image1 {
			position: absolute;
			width: 32rpx;
			height: 32rpx;
			// top: 116rpx;
			left: 30rpx;
		}

		.image2 {
			position: absolute;
			width: 56rpx;
			height: 56rpx;
			// top: 104rpx;
			right: 30rpx;
		}

		p {
			position: absolute;
			// top: 90rpx;
			line-height: 45rpx;
			bottom: 21rpx;
			right: 30rpx;
			font-size: 32rpx;
			color: #fff;
		}
	}
	.fixed {
		// display: flex;
		position: fixed !important;
		top: 0;
		left: 0;
		width: 100% !important;
		z-index: 40;
	}
  .content{
    padding: 30rpx;
    .info{
      padding-bottom: 30rpx;
      border-bottom: 1rpx solid #D8D8D8;
      .logo {
        width: 200rpx;
        height: 200rpx;
        margin-right: 17rpx;
      }
      .info_right{
        width: calc(100% - 217rpx);
        .info-name{
          height:120rpx;
          font-size: 30rpx;
          color: #333;
          line-height: 40rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box; //作为弹性伸缩盒子模型显示。
          -webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
          -webkit-line-clamp: 3; //显示的行
        }
        .text{
          color: #999;
          font-size: 28rpx;
          line-height: 39rpx;
          margin-bottom: 12rpx;
        }
        .text:last-child {
          margin-bottom: 0;
        }
      }
    }
    .nums{
      width: 100%;
      display: flex;
      padding: 30rpx 0 ;
      line-height: 42rpx;
      border-bottom: 1rpx solid #D8D8D8;
      .num_item{
        width: 50%;
        font-size: 30rpx;
        color: #333;
        font-weight: bold;
        display: flex;
        .label{
          width: 120rpx;
          margin-right: 40rpx;
        }
      }
    }
    .tabs{
      padding-top: 30rpx;
      margin-bottom: 40rpx;
      display: flex;
      .tab_item{
        margin-right: 120rpx;
        color: #999999;
        font-size: 24rpx;
        &.active {
          color: #333;
          font-size: 28rpx;
          font-weight: bold;
        }
      }
    }
    .list{
      .picker{
        margin-bottom: 30rpx;
      }
      .tabel_top{
        display: flex;
        margin-bottom: 40rpx;
        .tabel_item{
          width: 33.33%;
          text-align: center;
          color: #999999;
          font-size: 28rpx;
          line-height: 40rpx;
        }
      }
      .item{
        
        margin-bottom: 40rpx;
        display: flex;
        .tabel_item{
          width: 33.33%;
          text-align: center;
          color: #333;
          font-size: 28rpx;
          line-height: 40rpx;
        }
      }
    }
  }
</style>